<template>
  <div class="swipe-box">
    <swiper
      class="swipe bg-white"
      :circular="true"
      :indicatorDots="false"
      :autoplay="true"
      :current="banner.current"
      @change="changeBanner"
    >
      <swiper-item v-for="(banner, index) in data" :key="`banner${index}`">
        <div class="swipe-item justify-center items-center">
          <img :src="banner" alt="" class="img" mode="aspectFit" />
        </div>
      </swiper-item>
    </swiper>
    <div class="dots">{{ banner.current + 1 }}/{{ data.length }}</div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      banner: {
        current: 0,
      },
    };
  },
  computed: {},
  created() {},
  methods: {
    changeBanner(e) {
      this.banner.current = e.detail.current;
    },
  },
};
</script>
<style lang="scss">
.swipe-box {
  position: relative;
  .swipe {
    width: 100%;
    height: 375px;
    .img {
      width: 100%;
      height: 375px;
    }
  }
  .dots {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-width: 43px;
    padding: 0 12px;
    height: 16px;
    line-height: 18px;
    text-align: center;
    background: rgba(51, 51, 51, 0.2);
    border-radius: 12px;
    font-size: 11px;
    color: #ffffff;
  }
}
</style>
